{% load staticfiles %}
{% load times %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据大屏</title>
    <link rel="stylesheet" href="{% static 'css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'css/data.css' %}">
    <link href="{% static 'css/video-js.css' %}" rel="stylesheet">

</head>
<body>

<div class="layui-fluid">
    <div class="data-title">
        <img src="{% static 'images/screen.png' %}" alt="">
        <p>思华云忆</p>
        <div class="title-date">
            <span id="DateTime"></span>
        </div>
    </div>
</div>
<div class="layui-fluid data-body">
    <div class="layui-row data-center">
        <div class="layui-col-sm8">
            <div class="layui-row">
                <div class="layui-col-sm6">
                    <div class="data-top">
                        <img src="{% static 'images/quan.png' %}" alt="">
                        <span>来源统计分析</span>
                        <img src="{% static 'images/titles.png' %}" alt="">`
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-sm5">
                            <div class="bang-left">
                                <div class="bang-1" id="warns_count_ly" style="height: 20px">
{#                                    <p>总数</p>#}
{#                                    <h2></h2>#}
                                </div>
                                <div class="bang-2">m
                                    <div class="layui-row">
                                        <div class="layui-col-sm6">
                                            <div class="line" >
                                                <div id="zjs_count" style="height: 62px">

                                                </div>
                                                <div id="first_type1">

                                                </div>

                                                <div class="layui-progress">
                                                    <div class="layui-progress-bar bar-color1"
                                                         lay-percent="55%"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-sm6">
                                            <div class="line">
                                                <div id="dsjs_count" style="height: 62px">

                                                </div>
                                                 <div id="second1">

                                                </div>
                                                <div class="layui-progress">
                                                    <div class="layui-progress-bar bar-color2"
                                                         lay-percent="45%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bang-3">
                                    <div class="layui-row">
                                        <div class="layui-col-sm6">
                                            <div class="category">
                                                <span class="color-1"></span>
                                                <div id="first_types">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-sm6">
                                            <div class="category">
                                                <span class="color-2"></span>

                                                 <div id="second_types">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm6">
                            <div class="echarts-bang" id="echarts-bang">

                            </div>
                        </div>
                        <div class="layui-col-sm12">
                            <div class="data-top" style="margin-top: 50px">
                                <img src="{% static 'images/quan.png' %}" alt="">
                                <span>预警本周统计</span>
                                <img src="{% static 'images/titles.png' %}" alt="">`
                            </div>
                            <div class="layui-row car-box1">
                                <div class="layui-col-sm4">
                                    <div class="car-box">
                                        <div class="echarts-car" id="echarts-car1">
                                        </div>
                                        <div class="car-title">
                                            <p>回复率</p>
                                            <h2 class="car1">12%</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="car-box">
                                        <div class="echarts-car" id="echarts-car2">
                                        </div>
                                        <div class="car-title">
                                            <p>完结率</p>
                                            <h2 class="car2">55%</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="car-box">
                                        <div class="echarts-car" id="echarts-car3">
                                        </div>
                                        <div class="car-title">
                                            <p>丢弃率</p>
                                            <h2 class="car3">8%</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm12">
                            <div class="data-top" style="margin-top: 50px">
                                <img src="{% static 'images/quan.png' %}" alt="">
                                <span>高发监控区域</span>
                                <img src="{% static 'images/titles.png' %}" alt="">`
                            </div>
                            <div class="echarts-line" id="echarts-line" id="new-warn">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-sm4">
                            <div class="title-center color1">
                                <div class="center-1">
                                    <div class="center-2">
                                        <span>预警总计</span>
                                        <img src="{% static 'images/template.png' %}" alt="">
                                    </div>
                                    <div id="warns_count_middle" style="height: 23px">
{#                                        <h2 class="color4">{{ warn_sum }}</h2>#}
                                    </div>

                                </div>
                                <div id="first_type_middle" style="height: 23px">
{#                                     <p>类型:周界入侵</p>#}
                                </div>

                            </div>
                        </div>
                        <div class="layui-col-sm4">
                            <div class="title-center color2">
                                <div class="center-1">
                                    <div class="center-2">
                                        <span>待办预警</span>
                                        <img src="{% static 'images/middle.png' %}" alt="">
                                    </div>
                                    <div id="db_count" style="height: 25px">
{#                                        <h2 class="color5">58</h2>#}
                                    </div>

                                </div>
                                <div id="news-warn" style="height: 25px">

                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm4">
                            <div class="title-center color3">
                                <div class="center-1">
                                    <div class="center-2">
                                        <span>监控总数</span>
                                        <img src="{% static 'images/photo.png' %}" alt="">
                                    </div>
                                    <h2 class="color6">27</h2>
                                </div>
                                <p>在线监控: 27</p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-sm12">
                            <div class="index-map">

                                <div class="video-tv">
                                    <video id="player5"
                                           class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered"
                                           controls preload="auto" autoplay="autoplay"
                                           poster="{% static 'images/demo.jpg' %}"
                                           width="680" height="400" data-setup='{}'>

                                    </video>
                                </div>
                                  <div class="bdmap" id="map">

                                                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-col-sm12">
                <div class="data-top1">
                    <img src="{% static 'images/quan.png' %}" alt="">
                    <span>本周操控统计</span>
                    <img src="{% static 'images/titles.png' %}" alt="">`
                </div>
                <div class="index-col">
                    <div class="echarts-col" id="cols">

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12">
                <div class="data-top1" style="margin-top: 50px">
                    <img src="{% static 'images/quan.png' %}" alt="">
                    <span>监控检测预警</span>
                    <img src="{% static 'images/titles.png' %}" alt="">`
                </div>
                <div class="warn-image" id="new-images">
                    <div id="image_new" style="height: 300px">
{#                        <img src="{{ MEDIA_URL }}{{ image.image }}" alt="">`#}
                    </div>

                </div>
            </div>
            <div class="layui-col-sm12">
                <div class="data-top1 data-top2" style="margin-top: 10px">
                    <img src="{% static 'images/quan.png' %}" alt="">
                    <span>最新预警信息</span>
                    <img src="{% static 'images/titles.png' %}" alt="">
                </div>
                <div class="warn-desc" id="news_warn_new">
{#                    <ul id="news-warn">#}
                <ul>
                    <div id="new_three">

                    </div>
{#                        {% for warn in warns %}#}
{#                            <li>#}
{#                                <span></span>#}
{#                                动态编号#}
{#                                <strong>单号 :#}
{#                                    {{ warn.image_id }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最新预警信息{{ forloop.counter }}</strong>#}
{#                                <p>{{ warn.add_time | rec_time }}</p>#}
{#                            </li>#}
{#                        {% endfor %}#}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script src="{% static 'js/layui.js' %}"></script>
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/template-web.js' %}"></script>
<script src="{% static 'js/echarts.js' %}"></script>
<script src="{% static 'js/bdmap.js' %}"></script>
<script src="{% static 'js/data.js' %}"></script>
<script src="{% static 'js/video.js' %}"></script>
{#<script src="{% static 'js/video_home1.js' %}"></script>#}
{#TODO 做局部刷新的template.js#}
{% verbatim %}
<script type="text/html" id="new_warn">
<p>
     待办预警：{{ data }}
</p>
</script>
<script type="text/html" id="warn_count">
    <p>总数</p>
<h2>
    {{ data }}
</h2>
</script>
<script type="text/html" id="zj_count">
    <h3>
        {{ data }}
    </h3>

</script>
<script type="text/html" id="firsttype1">
   <p>
       {{ data }}
   </p>

</script>
<script type="text/html" id="dsj_count">
 <h3>
        {{ data }}
    </h3>
</script>
<script type="text/html" id="secondtype1">
<p>
    {{ data }}
</p>
</script>

<script type="text/html" id="type1">
<strong>
    {{ data }}
</strong>
</script>
<script type="text/html" id="type2">
<strong>
    {{ data }}
</strong>
</script>
<script type="text/html" id="count2">
<h2 class="color4">
    {{ data }}
</h2>
</script>
<script type="text/html" id="type1_middle">
<p>
    {{ data }}
</p>
</script>
<script type="text/html" id="count3">
<h2 class="color5">
    {{ data }}
</h2>
</script>
<script type="text/html" id="image">
<img src={{ data }} alt="">`
</script>
<script type="text/html" id="three">
    {{each data}}
    <li>
                               <span></span>
                               <strong>单号 :
                                   {{ $value.image_id }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最新预警信息</strong>
                               <p>{{ $value.add_time | newTime}}</p>
                           </li>
{{/each}}

</script>
{% endverbatim %}
<script>

    // 来源统计

    $(function () {
        var player5 = videojs("player5");
                                                    // player.bufferedPercent(); // 百分比的缓冲
                                                    player5.buffered(); // 缓冲
                                                    player5.ready(function () {
                                                        var myPlayer = this;
                                                        myPlayer.reset();
                                                        myPlayer.src({type: "rtmp/flv", src: "rtmp://192.168.1.11:1935/live/live1"});
                                                        myPlayer.load("rtmp://192.168.1.11:1935/live/live1"); // 这个需要从新加载地址...
                                                        myPlayer.play();

                                                    });
        var myChart = echarts.init(document.getElementById('echarts-bang'));
        myChart.setOption({
            tooltip: {
                show: false,
                trigger: 'none',
            },
            series: [
                {
                    name: '数据详情',
                    type: 'pie',
                    silent: true,
                    radius: ['80%', '100%'],
                    center: ['60%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        color: 'red',
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {
                            'value': 166,
                            'name': '智能预警'
                        },
                        {
                            'value': 102,
                            'name': '手动预警'
                        }
                    ]
                }
            ],
            color: ['#289DF5', '#FBC224']
        });
    });


    $(function () {
        var myChart = echarts.init(document.getElementById('echarts-car1'));
        myChart.setOption(
            {
                tooltip: {
                    show: false,
                    trigger: 'none',
                },
                series: [
                    {
                        type: 'gauge',
                        silent: true,
                        center: ['50%', '70%'],    // 默认全局居中
                        radius: '120%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 10,
                                color: [[0.2, '#B78601'], [0.8, '#B78601'], [1, '#B78601']]
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {           // 分隔线
                            length: 10,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 3
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [{value: '15.5'}]
                    },

                ]
            });
    });
    $(function () {
        var myChart = echarts.init(document.getElementById('echarts-car2'));
        myChart.setOption(
            {
                tooltip: {
                    show: false,
                    trigger: 'none',
                },
                series: [
                    {
                        name: '业务',
                        silent: true,
                        type: 'gauge',
                        center: ['50%', '70%'],    // 默认全局居中
                        radius: '120%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 10,
                                color: [[0.2, '#8BCDFF'], [0.8, '#8BCDFF'], [1, '#8BCDFF']]
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {           // 分隔线
                            length: 10,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 3
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [{value: '26.8'}]
                    },

                ]
            });
    });
    $(function () {
        var myChart = echarts.init(document.getElementById('echarts-car3'));
        myChart.setOption(
            {
                tooltip: {
                    show: false,
                    trigger: 'none',
                },
                series: [
                    {
                        name: '业务',
                        type: 'gauge',
                        silent: true,
                        center: ['50%', '70%'],    // 默认全局居中
                        radius: '120%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 10,
                                color: [[0.2, '#D46E32'], [0.8, '#D46E32'], [1, '#D46E32']]
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {           // 分隔线
                            length: 10,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 3
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [{value: '10.6'}]
                    },

                ]
            });
    });
</script>
</html>